<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
      <div>
        <el-button type="primary">添加</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="columnA" label="审计数据名称"> </el-table-column>
      <el-table-column prop="columnB" label="字段一"> </el-table-column>
      <el-table-column prop="columnC" label="字段二"> </el-table-column>
      <el-table-column prop="columnD" label="字段三"> </el-table-column>
      <el-table-column prop="columnE" label="字段四"> </el-table-column>
      <el-table-column prop="columnF" label="字段五"> </el-table-column>
      <el-table-column prop="columnG" label="操作">
        <template>
          <el-button type="primary" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination />
    </div>
  </el-card>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      tableData: [
        {
          columnA: '北京普通用户',
          columnB: '用户姓名',
          columnC: '总数',
          columnD: '营业厅',
          columnE: '套餐类型',
          columnF: '是否签合约',
          columnG: true
        },
        {
          columnA: '北京VIP用户',
          columnB: '用户姓名',
          columnC: '入网年限',
          columnD: '营业厅',
          columnE: '套餐类型',
          columnF: '合约年限',
          columnG: false
        },
        {
          columnA: '河北普通用户',
          columnB: '用户姓名',
          columnC: '总数',
          columnD: '营业厅',
          columnE: '套餐类型',
          columnF: '是否签合约',
          columnG: true
        },
        {
          columnA: '北京5G流量统计',
          columnB: '用户姓名',
          columnC: '是否为VIP',
          columnD: '营业厅',
          columnE: '套餐类型',
          columnF: '',
          columnG: true
        },
        {
          columnA: '北京新增5G用户',
          columnB: '用户姓名',
          columnC: '是否为合约机',
          columnD: '营业厅',
          columnE: '购买流量数量',
          columnF: '合约年限',
          columnG: false
        },
        {
          columnA: '天津新增5G用户',
          columnB: '用户姓名',
          columnC: '是否为合约机',
          columnD: '营业厅',
          columnE: '购买流量数量',
          columnF: '合约年限',
          columnG: false
        },
        {
          columnA: '北京新卡用户',
          columnB: '用户姓名',
          columnC: '套餐类型',
          columnD: '营业厅',
          columnE: '是否为5G',
          columnF: '',
          columnG: true
        },
        {
          columnA: '北京退网用户',
          columnB: '用户姓名',
          columnC: '套餐类型',
          columnD: '营业厅',
          columnE: '退网时间',
          columnF: '',
          columnG: true
        },
        {
          columnA: '河北退网用户',
          columnB: '用户姓名',
          columnC: '套餐类型',
          columnD: '营业厅',
          columnE: '退网时间',
          columnF: '',
          columnG: true
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin: 10px;
}
</style>
